<template>
	<view class="security-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="navbar-title">账号与安全</text>
			</view>
		</view>
		
		<!-- 安全等级 -->
		<view class="security-level">
			<view class="level-card">
				<view class="level-header">
					<text class="level-title">安全等级</text>
					<view class="level-badge" :class="securityLevel.type">
						<text class="badge-text">{{ securityLevel.text }}</text>
					</view>
				</view>
				<view class="level-progress">
					<view class="progress-bar">
						<view 
							class="progress-fill" 
							:style="{ width: securityLevel.progress + '%' }"
							:class="securityLevel.type"
						></view>
					</view>
				</view>
				<text class="level-tips">{{ securityLevel.tips }}</text>
			</view>
		</view>
		
		<!-- 安全设置列表 -->
		<view class="security-list">
			<view class="section-card">
				<view class="section-title">账号安全</view>
				
				<view class="security-item" @click="changePassword">
					<view class="item-left">
						<view class="item-icon password">
							<text class="icon-text">🔑</text>
						</view>
						<view class="item-info">
							<text class="item-title">修改密码</text>
							<text class="item-desc">定期更换密码，保护账号安全</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="security-item" @click="bindPhone">
					<view class="item-left">
						<view class="item-icon phone">
							<text class="icon-text">📱</text>
						</view>
						<view class="item-info">
							<text class="item-title">手机号码</text>
							<text class="item-desc">{{ userInfo.phone || '未绑定' }}</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
			</view>
			
			<view class="section-card">
				<view class="section-title">登录管理</view>
				
				<view class="security-item" @click="showDevices">
					<view class="item-left">
						<view class="item-icon device">
							<text class="icon-text">📲</text>
						</view>
						<view class="item-info">
							<text class="item-title">登录设备</text>
							<text class="item-desc">管理已登录的设备</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="security-item" @click="setupGesture">
					<view class="item-left">
						<view class="item-icon gesture">
							<text class="icon-text">🔐</text>
						</view>
						<view class="item-info">
							<text class="item-title">手势密码</text>
							<text class="item-desc" :class="{ disabled: !isApp }">{{ getGestureDesc() }}</text>
						</view>
					</view>
					<switch 
						:checked="settings.gesturePassword" 
						@change="toggleGesture" 
						:disabled="!isApp"
						color="#667eea"
					/>
				</view>
				
				<view class="security-item" @click="setupBiometric">
					<view class="item-left">
						<view class="item-icon biometric">
							<text class="icon-text">👆</text>
						</view>
						<view class="item-info">
							<text class="item-title">生物识别</text>
							<text class="item-desc" :class="{ disabled: !isApp }">{{ getBiometricDesc() }}</text>
						</view>
					</view>
					<switch 
						:checked="settings.biometric" 
						@change="toggleBiometric" 
						:disabled="!isApp"
						color="#667eea"
					/>
				</view>
			</view>
			
			<view class="section-card">
				<view class="section-title">数据安全</view>
				
				<view class="security-item" @click="exportData">
					<view class="item-left">
						<view class="item-icon backup">
							<text class="icon-text">💾</text>
						</view>
						<view class="item-info">
							<text class="item-title">数据备份</text>
							<text class="item-desc">备份重要数据到云端</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<view class="security-item" @click="clearData">
					<view class="item-left">
						<view class="item-icon clear">
							<text class="icon-text">🗑️</text>
						</view>
						<view class="item-info">
							<text class="item-title">清除数据</text>
							<text class="item-desc">清除所有本地数据</text>
						</view>
					</view>
					<text class="item-arrow">›</text>
				</view>
			</view>
		</view>
		
		<!-- 修改密码弹窗 -->
		<view class="password-modal" v-if="showPasswordModal" @click="hidePasswordModal">
			<view class="password-content" @click.stop>
				<view class="password-header">
					<text class="password-title">修改密码</text>
					<view class="close-btn" @click="hidePasswordModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="password-form">
					<view class="form-item">
						<text class="form-label">当前密码</text>
						<input 
							class="form-input" 
							type="password"
							v-model="passwordForm.oldPassword"
							placeholder="请输入当前密码"
							maxlength="20"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">新密码</text>
						<input 
							class="form-input" 
							type="password"
							v-model="passwordForm.newPassword"
							placeholder="请输入新密码（6-20位）"
							maxlength="20"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">确认新密码</text>
						<input 
							class="form-input" 
							type="password"
							v-model="passwordForm.confirmPassword"
							placeholder="请再次输入新密码"
							maxlength="20"
						/>
					</view>
					<button class="submit-btn" @click="submitPassword" :disabled="!canSubmitPassword">
						确认修改
					</button>
				</view>
			</view>
		</view>

		<!-- 手势密码设置弹窗 -->
		<view class="gesture-modal" v-if="showGestureModal" @click="hideGestureModal">
			<view class="gesture-content" @click.stop>
				<view class="gesture-header">
					<text class="gesture-title">{{ gestureMode === 'set' ? '设置手势密码' : '验证手势密码' }}</text>
					<view class="close-btn" @click="hideGestureModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="gesture-grid">
					<view 
						class="gesture-dot" 
						v-for="(dot, index) in gestureGrid" 
						:key="index"
						:class="{ active: dot.active, connected: dot.connected }"
						@touchstart="startGesture(index)"
						@touchmove="moveGesture"
						@touchend="endGesture"
					>
						<view class="dot-inner"></view>
					</view>
				</view>
				<text class="gesture-tips">{{ gestureTips }}</text>
			</view>
		</view>

		<!-- 登录设备弹窗 -->
		<view class="device-modal" v-if="showDeviceModal" @click="hideDeviceModal">
			<view class="device-content" @click.stop>
				<view class="device-header">
					<text class="device-title">登录设备</text>
					<view class="close-btn" @click="hideDeviceModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				<scroll-view class="device-list" scroll-y="true">
					<view 
						class="device-item" 
						v-for="(device, index) in loginDevices" 
						:key="index"
					>
						<view class="device-info">
							<text class="device-name">{{ device.name }}</text>
							<text class="device-detail">{{ device.detail }}</text>
							<text class="device-time">{{ device.loginTime }}</text>
						</view>
						<view class="device-status" :class="{ current: device.isCurrent }">
							<text class="status-text">{{ device.isCurrent ? '当前设备' : '移除' }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			userInfo: {},
			securityLevel: {
				progress: 75,
				type: 'medium',
				text: '中等',
				tips: '建议开启更多安全功能'
			},
			settings: {
				gesturePassword: false,
				biometric: false
			},
			showPasswordModal: false,
			showGestureModal: false,
			showDeviceModal: false,
			passwordForm: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			gestureMode: 'set', // set, verify
			gestureGrid: [],
			gesturePattern: [],
			savedGesturePattern: '',
			gestureTips: '请绘制手势密码',
			isApp: false,
			loginDevices: [
				{
					name: '当前设备',
					detail: 'iPhone 12 Pro • iOS 15.0',
					loginTime: '刚刚活跃',
					isCurrent: true
				},
				{
					name: 'MacBook Pro',
					detail: 'Chrome浏览器 • macOS 12.0',
					loginTime: '2小时前',
					isCurrent: false
				}
			]
		}
	},
	
	computed: {
		canSubmitPassword() {
			return this.passwordForm.oldPassword.trim() && 
				   this.passwordForm.newPassword.trim().length >= 6 && 
				   this.passwordForm.confirmPassword.trim() && 
				   this.passwordForm.newPassword === this.passwordForm.confirmPassword;
		}
	},
	
	onLoad() {
		this.checkEnvironment();
		this.loadUserInfo();
		this.calculateSecurityLevel();
		this.initGestureGrid();
	},
	
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		checkEnvironment() {
			// #ifdef APP-PLUS
			this.isApp = true;
			// #endif
			
			// #ifndef APP-PLUS
			this.isApp = false;
			// #endif
		},
		
		getGestureDesc() {
			if (!this.isApp) {
				return '该功能仅在App中可用';
			}
			return this.settings.gesturePassword ? '已开启' : '未开启';
		},
		
		getBiometricDesc() {
			if (!this.isApp) {
				return '该功能仅在App中可用';
			}
			return this.settings.biometric ? '已开启' : '未开启';
		},
		
		loadUserInfo() {
			const currentUser = localStorage.getCurrentUser();
			if (currentUser) {
				this.userInfo = currentUser;
			}
			
			// 加载安全设置
			this.settings.gesturePassword = !!uni.getStorageSync('gesturePassword');
			this.settings.biometric = uni.getStorageSync('biometric') || false;
		},
		
		calculateSecurityLevel() {
			let score = 0;
			
			if (this.isApp) {
				// App环境下的安全等级计算
				if (this.userInfo.phone) score += 30;
				if (this.settings.gesturePassword) score += 35;
				if (this.settings.biometric) score += 35;
			} else {
				// 小程序环境下只考虑手机号
				if (this.userInfo.phone) score += 100;
			}
			
			this.securityLevel.progress = score;
			
			if (score >= 75) {
				this.securityLevel.type = 'high';
				this.securityLevel.text = '高';
				this.securityLevel.tips = '您的账号安全等级很高';
			} else if (score >= 50) {
				this.securityLevel.type = 'medium';
				this.securityLevel.text = '中等';
				this.securityLevel.tips = '建议开启更多安全功能';
			} else {
				this.securityLevel.type = 'low';
				this.securityLevel.text = '低';
				this.securityLevel.tips = '请尽快完善安全设置';
			}
		},
		
		changePassword() {
			this.showPasswordModal = true;
		},
		
		hidePasswordModal() {
			this.showPasswordModal = false;
			this.passwordForm = {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			};
		},
		
		submitPassword() {
			if (!this.canSubmitPassword) return;
			
			// 验证当前密码
			const currentUser = localStorage.getCurrentUser();
			if (!currentUser || currentUser.password !== this.passwordForm.oldPassword) {
				uni.showToast({
					title: '当前密码错误',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '修改中...'
			});
			
			// 模拟修改密码
			setTimeout(() => {
				const updateResult = localStorage.updateUserInfo({
					password: this.passwordForm.newPassword
				});
				
				uni.hideLoading();
				if (updateResult.success) {
					uni.showToast({
						title: '密码修改成功',
						icon: 'success'
					});
					this.hidePasswordModal();
				} else {
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					});
				}
			}, 1500);
		},
		
		bindPhone() {
			uni.showModal({
				title: '绑定手机',
				content: '手机绑定功能开发中',
				showCancel: false
			});
		},
		
		showDevices() {
			this.showDeviceModal = true;
		},
		
		hideDeviceModal() {
			this.showDeviceModal = false;
		},
		
		setupGesture() {
			if (!this.isApp) {
				uni.showToast({
					title: '该功能仅在App中可用',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			if (this.settings.gesturePassword) {
				// 已开启，进入验证模式
				this.gestureMode = 'verify';
				this.gestureTips = '请输入当前手势密码';
			} else {
				// 未开启，进入设置模式
				this.gestureMode = 'set';
				this.gestureTips = '请绘制手势密码';
			}
			this.showGestureModal = true;
			this.resetGestureGrid();
		},
		
		hideGestureModal() {
			this.showGestureModal = false;
			this.resetGestureGrid();
		},
		
		initGestureGrid() {
			this.gestureGrid = [];
			for (let i = 0; i < 9; i++) {
				this.gestureGrid.push({
					active: false,
					connected: false,
					index: i
				});
			}
		},
		
		resetGestureGrid() {
			this.gesturePattern = [];
			this.gestureGrid.forEach(dot => {
				dot.active = false;
				dot.connected = false;
			});
		},
		
		startGesture(index) {
			if (!this.gestureGrid[index].active) {
				this.gestureGrid[index].active = true;
				this.gesturePattern.push(index);
			}
		},
		
		moveGesture(e) {
			// 这里可以添加滑动连接逻辑
		},
		
		endGesture() {
			if (this.gesturePattern.length < 4) {
				this.gestureTips = '至少连接4个点';
				this.resetGestureGrid();
				return;
			}
			
			const patternString = this.gesturePattern.join('-');
			
			if (this.gestureMode === 'set') {
				if (!this.savedGesturePattern) {
					this.savedGesturePattern = patternString;
					this.gestureTips = '请再次绘制确认';
					this.resetGestureGrid();
				} else if (this.savedGesturePattern === patternString) {
					// 设置成功
					uni.setStorageSync('gesturePassword', patternString);
					this.settings.gesturePassword = true;
					this.calculateSecurityLevel();
					uni.showToast({
						title: '手势密码设置成功',
						icon: 'success'
					});
					this.hideGestureModal();
				} else {
					this.gestureTips = '两次绘制不一致，请重新设置';
					this.savedGesturePattern = '';
					this.resetGestureGrid();
				}
			} else if (this.gestureMode === 'verify') {
				const savedPattern = uni.getStorageSync('gesturePassword');
				if (patternString === savedPattern) {
					// 验证成功，可以关闭
					uni.showModal({
						title: '确认关闭',
						content: '确定要关闭手势密码吗？',
						success: (res) => {
							if (res.confirm) {
								this.settings.gesturePassword = false;
								this.calculateSecurityLevel();
								uni.removeStorageSync('gesturePassword');
								uni.showToast({
									title: '手势密码已关闭',
									icon: 'success'
								});
								this.hideGestureModal();
							}
						}
					});
				} else {
					this.gestureTips = '手势密码错误';
					this.resetGestureGrid();
				}
			}
		},
		
		toggleGesture(e) {
			if (!this.isApp) {
				uni.showToast({
					title: '该功能仅在App中可用',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			// 通过开关切换时直接调用设置方法
			if (e.detail.value && !this.settings.gesturePassword) {
				this.setupGesture();
			} else if (!e.detail.value && this.settings.gesturePassword) {
				this.setupGesture();
			}
		},
		
		setupBiometric() {
			if (!this.isApp) {
				uni.showToast({
					title: '该功能仅在App中可用',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			if (this.settings.biometric) {
				// 已开启，询问是否关闭
				uni.showModal({
					title: '确认关闭',
					content: '确定要关闭生物识别吗？',
					success: (res) => {
						if (res.confirm) {
							this.settings.biometric = false;
							this.calculateSecurityLevel();
							uni.removeStorageSync('biometric');
							uni.showToast({
								title: '生物识别已关闭',
								icon: 'success'
							});
						}
					}
				});
			} else {
				// 未开启，检查设备是否支持
				// #ifdef APP-PLUS
				uni.checkIsSupportSoterAuthentication({
					success: (res) => {
						if (res.supportMode.includes('fingerPrint') || res.supportMode.includes('facial')) {
							uni.startSoterAuthentication({
								requestAuthModes: ['fingerPrint', 'facial'],
								challenge: '123456',
								authContent: '请验证身份以开启生物识别',
								success: () => {
									this.settings.biometric = true;
									this.calculateSecurityLevel();
									uni.setStorageSync('biometric', true);
									uni.showToast({
										title: '生物识别已开启',
										icon: 'success'
									});
								},
								fail: () => {
									uni.showToast({
										title: '验证失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '设备不支持生物识别',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '设备不支持生物识别',
							icon: 'none'
						});
					}
				});
				// #endif
				
				// #ifndef APP-PLUS
				// 在非App环境下模拟生物识别
				uni.showModal({
					title: '模拟生物识别',
					content: '是否开启生物识别功能？',
					success: (res) => {
						if (res.confirm) {
							this.settings.biometric = true;
							this.calculateSecurityLevel();
							uni.setStorageSync('biometric', true);
							uni.showToast({
								title: '生物识别已开启',
								icon: 'success'
							});
						}
					}
				});
				// #endif
			}
		},
		
		toggleBiometric(e) {
			if (!this.isApp) {
				uni.showToast({
					title: '该功能仅在App中可用',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			// 通过开关切换时直接调用设置方法
			if (e.detail.value !== this.settings.biometric) {
				this.setupBiometric();
			}
		},
		
		exportData() {
			uni.showModal({
				title: '数据备份',
				content: '数据备份功能开发中',
				showCancel: false
			});
		},
		
		clearData() {
			uni.showModal({
				title: '警告',
				content: '确定要清除所有本地数据吗？此操作无法撤销',
				confirmColor: '#ff4757',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '数据清除功能开发中',
							icon: 'none'
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.security-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.security-level {
	position: relative;
	z-index: 1;
	padding: 60rpx 30rpx 30rpx;
}

.level-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
}

.level-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.level-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.level-badge {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	
	&.high {
		background: rgba(76, 217, 100, 0.1);
		.badge-text { color: #4cd964; }
	}
	
	&.medium {
		background: rgba(255, 149, 0, 0.1);
		.badge-text { color: #ff9500; }
	}
	
	&.low {
		background: rgba(255, 59, 48, 0.1);
		.badge-text { color: #ff3b30; }
	}
}

.badge-text {
	font-size: 24rpx;
	font-weight: 600;
}

.level-progress {
	margin-bottom: 20rpx;
}

.progress-bar {
	height: 12rpx;
	background: #f0f0f0;
	border-radius: 6rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	border-radius: 6rpx;
	transition: width 0.3s ease;
	
	&.high {
		background: linear-gradient(90deg, #4cd964 0%, #5ac777 100%);
	}
	
	&.medium {
		background: linear-gradient(90deg, #ff9500 0%, #ffad33 100%);
	}
	
	&.low {
		background: linear-gradient(90deg, #ff3b30 0%, #ff5c4d 100%);
	}
}

.level-tips {
	font-size: 26rpx;
	color: #666;
}

.security-list {
	position: relative;
	z-index: 1;
	padding: 0 30rpx 40rpx;
}

.section-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
}

.security-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
}

.security-item:last-child {
	border-bottom: none;
}

.security-item:active {
	background: rgba(102, 126, 234, 0.05);
	border-radius: 16rpx;
	margin: 0 -20rpx;
	padding: 30rpx 20rpx;
}

.item-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.item-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	
	&.password {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	&.phone {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}
	
	&.email {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
	}
	
	&.device {
		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	}
	
	&.gesture {
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	}
	
	&.biometric {
		background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
	}
	
	&.backup {
		background: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
	}
	
	&.clear {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	}
}

.icon-text {
	font-size: 36rpx;
}

.item-info {
	flex: 1;
}

.item-title {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.item-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
}

.item-arrow {
	font-size: 36rpx;
	color: #ccc;
	margin-left: 20rpx;
}

.device-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.device-content {
	width: 100%;
	max-height: 80%;
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;
}

.device-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.device-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30rpx;
	background: #f8f9fa;
}

.close-icon {
	font-size: 36rpx;
	color: #666;
}

.device-list {
	max-height: 600rpx;
}

.device-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.device-info {
	flex: 1;
}

.device-name {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.device-detail {
	display: block;
	font-size: 26rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.device-time {
	display: block;
	font-size: 24rpx;
	color: #999;
}

.device-status {
	padding: 12rpx 24rpx;
	border-radius: 20rpx;
	
	&.current {
		background: rgba(102, 126, 234, 0.1);
		.status-text { color: #667eea; }
	}
	
	&:not(.current) {
		background: rgba(255, 59, 48, 0.1);
		.status-text { color: #ff3b30; }
	}
}

.status-text {
	font-size: 24rpx;
	font-weight: 600;
}

/* 修改密码弹窗样式 */
.password-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.password-content {
	width: 680rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}

.password-header {
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.password-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
}

.password-form {
	padding: 40rpx 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.form-input {
	width: 100%;
	height: 80rpx;
	background: #f5f6fa;
	border-radius: 10rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.submit-btn {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 10rpx;
	font-size: 28rpx;
	margin-top: 20rpx;
}

.submit-btn[disabled] {
	background: #ccc;
	color: #999;
}

/* 手势密码弹窗样式 */
.gesture-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.gesture-content {
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	padding-bottom: 40rpx;
}

.gesture-header {
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.gesture-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
}

.gesture-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60rpx;
	padding: 60rpx;
	justify-items: center;
	align-items: center;
}

.gesture-dot {
	width: 80rpx;
	height: 80rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dot-inner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #ddd;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.gesture-dot.active .dot-inner {
	background: #667eea;
	border-color: #667eea;
	transform: scale(1.5);
}

.gesture-tips {
	display: block;
	text-align: center;
	font-size: 26rpx;
	color: #666;
	margin-top: 20rpx;
}

/* 禁用状态样式 */
.security-item switch[disabled] {
	opacity: 0.5;
}

.security-item .item-desc {
	&.disabled {
		color: #999;
		font-style: italic;
	}
}
</style> 